<template>
  <div style="margin-top: 10%">
    <el-button type="danger" round @click="getToken()">Token</el-button>
  </div>
  <div style="margin-top: 2%">
    <el-button type="danger" round @click="getVoiceLists()"
      >VoiceList</el-button
    >
    <loading></loading>
    <loading2></loading2>
  </div>
  <div style="margin-top: 2%">
    <el-button type="danger" round @click="getVoice()">getVoice</el-button>
  </div>
  <div style="margin-top: 2%">
    <el-button type="danger" round @click="sleepTest()">sleep</el-button>
  </div>
  <div style="margin-top: 2%">
    <el-button type="danger" round @click="getVideo()">video</el-button>
  </div>
  <div style="margin-top: 2%">
    <el-button type="danger" round @click="generatePic()">sleep</el-button>
  </div>
  <div style="margin-top: 2%">
    <el-button type="danger" round @click="test3()">sleep1</el-button>
  </div>
  <div class="l2">
    <PlanetLoading></PlanetLoading>
  </div>
  <audio ref="audio" class="aud" :src="audioSrc"></audio>
</template>

<script>
import loading from "@/components/loading.vue";
import loading2 from "@/components/loading2.vue";
import PlanetLoading from "@/components/PlanetLoading.vue";
export default {
  name: "Audio",
  data() {
    return {
      subcription_key: "f8bf74d4723845a19e385418bb0a1642",
      token: "",
      audioSrc: "",
      story: [
        {
          Chinese: "",
          English: "Hello",
          pic: "https://fengru-pic.oss-cn-beijing.aliyuncs.com/786480fe-c6d1-41e9-afdc-104187e5bf00.png",
        },
        {
          Chinese: "你好啊",
          English: "Hellos",
          pic: "https://fengru-pic.oss-cn-beijing.aliyuncs.com/786480fe-c6d1-41e9-afdc-104187e5bf00.png",
        },
        {
          Chinese: "你好啊",
          English: "Hello2",
          pic: "https://fengru-pic.oss-cn-beijing.aliyuncs.com/786480fe-c6d1-41e9-afdc-104187e5bf00.png",
        },
        {
          Chinese: "你好啊",
          English: "Hello3",
          pic: "https://fengru-pic.oss-cn-beijing.aliyuncs.com/786480fe-c6d1-41e9-afdc-104187e5bf00.png",
        },
        {
          Chinese: "你好啊",
          English: "Hello4",
          pic: "",
        },
      ],
      flag1: false,
    };
  },
  components: {
    loading,
    loading2,
    PlanetLoading,
  },
  methods: {
    getToken() {
      this.$axios({
        url: "https://eastasia.api.cognitive.microsoft.com/sts/v1.0/issuetoken",
        method: "post",
        headers: {
          "Ocp-Apim-Subscription-Key": this.subcription_key,
        },
      }).then((res) => {
        console.log(res.data);
        this.token = res.data;
      });
    },
    getVoiceLists() {
      this.$axios({
        url: "https://eastasia.tts.speech.microsoft.com/cognitiveservices/voices/list",
        method: "get",
        headers: {
          "Ocp-Apim-Subscription-Key": this.subcription_key,
        },
      }).then((res) => {
        console.log(res.data);
      });
    },
    getVoice() {
      this.$axios({
        url: " http://127.0.0.1:8000/api/speech",
        method: "get",
        params: { speech: "你们好啊，很高兴见到大家" },
      }).then((res) => {
        console.log(res.data);
        this.audioSrc = res.data.src;
        console.log(this.audioSrc);
        setTimeout(() => {
          this.$refs.audio.play();
        }, 10);
      });
    },
    getVideo() {
      this.$axios({
        url: " http://127.0.0.1:8000/api/virtual",
        method: "get",
        params: {
          title: "你们好啊，很高兴见到大家",
          content:
            "\n可爱的小朋友，你好啊！我是智能语音助手小文，今天由我给你来讲故事啦！" +
            "\n" +
            "有一天，小熊维尼和跳跳虎决定一起去森林里玩耍。他们带着水壶和面包，准备在森林里野餐。可是，当他们到达森林时，发现水壶和面包都不见了。他们开始找寻，却发现有一个小松鼠把他们的食物拿走了。" +
            "\n" +
            "有一天，小熊维尼和跳跳虎决定一起去森林里玩耍。他们带着水壶和面包，准备在森林里野餐。可是，当他们到达森林时，发现水壶和面包都不见了。他们开始找寻，却发现有一个小松鼠把他们的食物拿走了。",
        },
      }).then((res) => {
        console.log(res.data);
      });
    },
    //延迟的方法
    sleep1(numberMillis) {
      var now = new Date();
      var exitTime = now.getTime() + numberMillis;
      while (true) {
        now = new Date();
        if (now.getTime() > exitTime) return;
      }
    },
    sleep2() {
      console.log("sleep");
    },
    sleepTest() {
      let inter;
      var i = 0;
      this.sleep2();
      inter = setInterval(function () {
        console.log("sleep");
        i += 1;
        if (i >= 5) {
          clearInterval(inter);
        }
      }, 5000);
    },
    async add(i) {
      //因为里面返回的本身就是个promise,所以不用async修饰也可以
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(++i); //异步执行后,调用resolve()改变异步状态
        }, 2000);
      });
    },
    async test3() {
      let count = 0;
      while (count < 10) {
        count = await this.add(count); //等待异步方法test1执行完成把值传给v
        console.log(count);
      }
    },
    getpic(i) {
      setTimeout(
        function (y) {
          console.log(y);
          console.log("sleep");
          this.flag1 = !this.flag1;
        },
        2000,
        i
      );
    },
    generatePic() {
      let inter;
      var i = 0;
      this.getpic(i);
      if (i <= 5 && this.flag1) {
        this.flag1 = false;
        this.getpic(i);
      }
      // console.log(this.story[0].English);
      // var j = 1;
      // // let _this = this;
      // inter = setInterval(() => {
      //   console.log(this.story[j].English);
      //   // this.draw(this.story[j].English, j);
      //   j += 1;
      //   if (j >= this.story.length) {
      //     clearInterval(inter);
      //   }
      // }, 5000);
    },
  },
};
</script>

<style>
.l2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  background-color: #3c4359;
}
</style>
